<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="学科名称" prop="subjectName">
        <el-input v-model="form.subjectName"></el-input>
      </el-form-item>
      <el-form-item label="是否显示">
        <el-switch v-model="form.isFrontDisplay"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { detail, add, update } from '@/api/hmmm/subjects'
export default {
  name: 'subjectAdd',
  props: {
    subjectId: {
      type: Number,
      required: true
    },
    isEdit: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      form: {
        isFrontDisplay: 0, // 是否显示
        subjectName: '' // 学科名
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      reviseId: null // 修改学科 id
    }
  },
  created () {
    // 数据回显
    if (this.isEdit) {
      this.detail()
    }
  },
  methods: {
    // 取消按钮
    close () {
      this.$emit('close')
    },

    // 兜底验证
    // 确定按钮
    onSubmit () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        // 开关返回的是 true 和 false ，  将 true 和 false 转换成 1 和 0 传给后台
        if (this.isFrontDisplay === true) {
          this.isFrontDisplay = 1
        } else {
          this.isFrontDisplay = 0
        }
        // 编辑学科修改后台需要的传值
        const list = {
          id: this.reviseId,
          subjectName: this.form.subjectName,
          isFrontDisplay: this.form.isFrontDisplay
        }
        // 添加学科需要传的值
        const newList = {
          subjectName: this.form.subjectName,
          isFrontDisplay: this.form.isFrontDisplay
        }
        // 编辑学科修改
        if (this.isEdit) {
          await update(list)
        } else {
          // 添加学科
          await add(newList)
        }
        // 弹出成功提示
        this.$message.success('新增学科成功')
        // 重新刷新页面 关闭弹框
        this.$emit('closeDialog')
      })
    },

    // 数据回填
    detail () {
      detail({ id: this.subjectId }).then((res) => {
        // 修改需要的 id
        this.reviseId = res.data.id
        this.form.subjectName = res.data.subjectName
        // 将后台传来的 0 或者 1 转换成 false  和 true
        if (res.data.isFrontDisplay === 1) {
          this.form.isFrontDisplay = true
        } else if (res.data.isFrontDisplay === 0) {
          this.form.isFrontDisplay = false
        }
      }).catch((err) => err)
    }
  }
}
</script>

<style scoped lang='scss'>
button.el-button.el-button--primary.el-button--medium {
  margin-left: 280px;
}
</style>
